<!DOCTYPE html>
<html>
<head>
	<title>福星开门红包</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/index-sass.css" />
</head>
<body>
	<img src="images/banner.png" class="banner"/>
	<div id="content" v-if="prizeData" v-show='prizeData' style="display: none;">
		<img src="images/share-btn.png" class="share" @click="share"/>
		<div class="gift-box">
			<div class="nogift" v-if="!prizeData.TicketAwards.daijing.has && !prizeData.TicketAwards.wuye.has">
				<img src="images/nogift.png" class="gift-li"/>
			</div>
			<div class="gift">
				<img v-if="prizeData.TicketAwards.daijing.has && !prizeData.TicketAwards.daijing.use" src="images/voucher.png" class="gift-li" @click='gowx'/>
				<img v-if="prizeData.TicketAwards.daijing.has && prizeData.TicketAwards.daijing.use" src="images/voucher_used.png" class="gift-li"/>
				<img v-if="prizeData.TicketAwards.wuye.has && !prizeData.TicketAwards.wuye.use" src="images/property.png" class="gift-li"/>
				<img v-if="prizeData.TicketAwards.wuye.has && prizeData.TicketAwards.wuye.use" src="images/property.png" class="gift-li"/>
			</div>
			<!--<button v-if="!prizeData.TicketAwards.daijing || !prizeData.TicketAwards.wuye" class="ms-btn-block">
				去使用投资券
				<img src="images/go_btn_icon.png"/>
			</button>-->
		</div>
		<div class="welfare-box">
			<div class="card-group">
				<template v-for="(word , key) in prizeData.WordAwards">
					<img  v-if="word == true"  class="card" :src="'images/card-'+key+'.png'"/>
					<img v-else src="images/card-yd.png" class="card"/>
				</template>
			</div>
			<p class="text">五张福利卡，全变亮时就可以换取大奖</p>
			<button class="ms-btn-block" @click='exchangeAward' :class="{ disable: !prizeData.wordStatus }" :disabled="!prizeData.wordStatus">
				去领取奖品
				<img src="images/go_btn_icon.png"/>
			</button>
			<div class="address-btn" @click="address">填写收货地址</div>
			<div class="has-used" v-if="prizeData.exchange.hasExchange">
				<img src="images/card_used.png"/>
				<div class="text">
					已兑换成功<br />{{prizeData.exchange.awardInfo}}
				</div>
			</div>
		</div>
		<img src="images/rule.png"/>
		<img src="images/extension.png"/>
	</div>
	<div id="address" v-if="show" v-show="show" style="display: none;">
		<div class="address-box">
			<img src="images/address_close.png" class="close" @click="close"/>
			<div class="alert-info">
				<p>亲，请完善您的信息</p>
				<p>奖品给您邮寄上门！</p>
				<p>活动结束后，请您在指定时间内兑换奖品即可!</p>
			</div>
			<div class="input-box">
				<div class="row">
					<label>省份</label>
					<select id="province" v-model="provinceVal">
						<option v-for="province in provinceData" :value = "province.code">{{province.name}}</option>
					</select>
					<select id="city" v-model="cityVal">
						<option v-for="city in cityData" :value = "city.code">{{city.name}}</option>
					</select>
					<select id="area" v-model="areaVal">
						<option v-for="area in areaData" :value = "area.code">{{area.name}}</option>
					</select>
				</div>
				<div class="row">
					<label>街道</label>
					<input type="text" v-model="detailAddr"/>
				</div>
				<div class="row">
					<label>手机号</label>
					<input type="number" v-model="mobile"/>
				</div>
				<div class="row">
					<label>姓名</label>
					<input type="text" v-model="contactPerson"/>
				</div>
			</div>
			<p class="info-bottom">按活动最终所获得的福利卡给您邮寄奖励，亲</p>
			<button class="sava-address" @click="addAddress">保存地址</button>
		</div>
	</div>
	
	
	<script src="js/city-data.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/ms-common.js" ></script>
	<script type="text/javascript">
		var activityType = 'FX_ACTIVITY'
		var prizeData = {
						WordAwards: {"fu":false,"xing":false,"zhi":false,"hui":false,"jia":false},
						TicketAwards: {"daijing":{has:false,use:false},"wuye":{has:false,use:false}},
						wordStatus: false,
						exchange:{hasExchange: false,awardInfo:''}
					}
		var address = {
			show: false,
			provinceData: rawCitiesData,
			cityData: [],
			areaData: [],
			provinceVal: null,
			cityVal: null,
			areaVal: null,
			detailAddr: "",
			mobile: "",
			contactPerson: "",
		}
		var add = new Vue({
			el: '#address',
			data: address,
			methods:{
				close: function () {
					address.show = false
				},
				addAddress: function () {
					var contactPerson = this.contactPerson;
					var mobile = this.mobile;
					var detailAddr = this.detailAddr;
					
					var isDauAddr = 1;
					//验证
					if (!this.provinceVal || !this.provinceName || !this.cityVal || !this.cityName || !this.areaVal || !this.areaName) {
						$mswindow.alert('请选择省份');
					}
					if (!detailAddr || detailAddr.length < 4) {
						$mswindow.alert('详细地址必须大于4位');
						return;	
					}
					if (!mobile || !(/^1[34578]\d{9}$/.test(mobile))) {
						$mswindow.alert('请输入正确的手机号');
						return;	
					}
					if (!contactPerson || !(/^[\u4e00-\u9fa5]{2,10}$/.test(contactPerson))) {
						$mswindow.alert('请输入2-10位中文姓名');
						return;	
					}
					var data = {};
					data.contactPerson = contactPerson;
					data.mobile = mobile;
					data.detailAddr = detailAddr;
					
					data.isDauAddr = isDauAddr;
					data.provinceCode = this.provinceVal;
					data.provinceName = this.provinceName;
					data.cityCode = this.cityVal;
					data.cityName = this.cityName;
					data.areaCode = this.areaVal;
					data.areaName = this.areaName;
		        	data.token = $mscomm.getProperty('token');
					console.log(data)
					$mscomm.jqpost("userAddress/addUserAddr",data,function(data){
			             if(data.ec=="M00000"){
			                 	$mswindow.alert("添加成功",function () {
//			                 		 $mscomm.go("address-chose.html");
			                 	})
			             }
			             else{
			                $mswindow.alert(data.em,"提示");
			             } 
			        });
				},
			},
			created: function () {
				this.provinceVal = '420000'
				var _self = this
				//等watch，computed计算完成后，再赋值
				setTimeout(function () {
					_self.cityVal = '420100'
				},0)
				setTimeout(function () {
					_self.areaVal = '420103'
				},0)
				
			},
			watch:{
				provinceVal: function () {
					for (var i = 0; i < this.provinceData.length; i++) {
				      	console.log(this.cityVal+','+this.areaVal)
					  	if (this.provinceData[i].code == this.provinceVal) {
					  		this.cityVal = this.provinceData[i].sub[0].code
					  		this.cityData = this.provinceData[i].sub;
					  		return;
					  	}
					}
					this.cityVal = this.provinceData[0].sub[0].code
			      	this.cityData =  this.provinceData[0].sub;
				},
				cityVal: function () {
					for (var i = 0; i < this.cityData.length; i++) {
				      	console.log(this.cityVal+','+this.areaVal)
				      	if (this.cityData[i].code == this.cityVal) {
				      		this.areaVal = this.cityData[i].sub[0].code
				      		this.areaData =  this.cityData[i].sub;
				      		 return;
				      	}
				      }
			      	this.areaVal = this.cityData[0].sub[0].code
			        this.areaData =  this.cityData[0].sub
				}
			},
			computed: {
				provinceName: function () {
					for (var i = 0; i < this.provinceData.length; i++) {
					  	if (this.provinceData[i].code == this.provinceVal) {
					  		return this.provinceData[i].name;
					  	}
					}
				},
				cityName: function () {
					for (var i = 0; i < this.cityData.length; i++) {
					  	if (this.cityData[i].code == this.cityVal) {
					  		return this.cityData[i].name;
					  	}
					}
				},
				areaName: function () {
					for (var i = 0; i < this.areaData.length; i++) {
					  	if (this.areaData[i].code == this.areaVal) {
					  		return this.areaData[i].name;
					  	}
					}
				},
			}
		});
		new Vue({
		  	el: '#content',
		  	data: {prizeData:null},
		  	methods: {
		  		address: function () {
		  			address.show = true
		  		},
				gowx: function () {
					location.href = $mscomm.getHost() + 'h5'
				},
				showContent: function (data){
//					var prizeData = {
//						WordAwards: {"fu":false,"xing":false,"zhi":false,"hui":false,"jia":false},
//						TicketAwards: {"daijing":{has:false,use:false},"wuye":{has:false,use:false}},
//						wordStatus: false,
//						exchange:{hasExchange: false,awardInfo:''}
//					}
					prizeData.wordStatus = data.wordStatus
					if (data.receivedWordGift) {
						prizeData.exchange.hasExchange = true;
						prizeData.exchange.awardInfo = data.receivedWordGift;
						
					}
					
					for (var i = 0; i < data.Awards.length; i++) {
						if (data.Awards[i].awardType === '02' && data.Awards[i].num >= 0) {
							if (data.Awards[i].status == 1) {
								prizeData.TicketAwards.daijing.use = true
							} 
							prizeData.TicketAwards.daijing.has = true
						} else if (data.Awards[i].awardType === '01' && data.Awards[i].num >= 0) {
							if (data.Awards[i].status == 1) {
								prizeData.TicketAwards.wuye.use = true
							} 
							prizeData.TicketAwards.wuye.has = true
						} else if (data.Awards[i].awardType === '03') {
							if (data.Awards[i].awardInfo == '福') {
								prizeData.WordAwards.fu = true
							} else if (data.Awards[i].awardInfo == '星'){
								prizeData.WordAwards.xing = true
							} else if (data.Awards[i].awardInfo == '智'){
								prizeData.WordAwards.zhi = true
							} else if (data.Awards[i].awardInfo == '慧'){
								prizeData.WordAwards.hui = true
							} else if (data.Awards[i].awardInfo == '家'){
								prizeData.WordAwards.jia = true
							}
						}
					}
					this.prizeData = prizeData
				},
				exchangeAward: function () {
					var _self = this;
					$mscomm.jqpost("API/exchangeAward", {
					    "token": $mscomm.getProperty("token"),
					}, function(data) {
//					    var data = {"ec":"M00000","em":"","requestURI":"","execptionTrace":"","cd":{"msg":"OK",awardInfo:'iphone6一部',"success":true}}
						
						if (data.ec === 'M00000') {
							if (data.cd.type == 1) {
								_self.prizeData.exchange.hasExchange = true;
								_self.prizeData.exchange.awardInfo = data.cd.exchange
								_self.prizeData.wordStatus = false
							}else if (data.cd.type == 0) {
								$mswindow.alert('资格不够')
							}else if (data.cd.type == 2) {
								$mswindow.alert('您已经换过奖啦')
							}else{
								aler(data.em)
							}
							
						}else{
							$mswindow.alert(data.em);
						}
	
					});
					},
				share: function() {
					shareData = {};
					shareData.url =  $mscomm.getHost()+'h5/activity/fuxingOpenenvelopes/share.html';
					shareData.title = '福星&民生易贷强强联手，打造春季集福利卡，赢大奖';
					shareData.content = '开门红包送豪礼，拼手气拿大奖';
					shareData.iconUrl =  $mscomm.getHost()+'h5/activity/fuxingOpenenvelopes/images/wxshare.jpg';
					 
					if ($mscomm.isAndroid()) {
						window.jsObject.ShareCMSBFinance(shareData.url, shareData.title, shareData.content, shareData.iconUrl);
					}else if($mscomm.isIphone()){
						var share = {
							"title" : shareData.title,
							"desc" : shareData.content,
							"shareUrl" : shareData.url,
							"shareIco" : shareData.iconUrl
						};
						var shareInfo = JSON.stringify(share);
						Toyun.share(shareInfo);
					}else{
						console.log('点击了分享按钮')
					}
				}
			 
			},
		  	created: function () {
		  		var _self = this;
				$mscomm.jqpost("APL/userPrizes", {
					activityType: activityType,
				    "token": $mscomm.getProperty("token"),
				}, function(data) {
//				    var data = {"ec":"M00000","em":"","requestURI":"","execptionTrace":"","cd":{"msg":"OK","Awards":[{"awardType":"01","awardInfo":"38.00","num":1,"status":"1"},{"awardType":"02","awardInfo":"38.00","num":1,"status":"1"},
//				    
//						    	{"awardType":"03","awardInfo":"星","num":2,"status":"0"},
//						    	{"awardType":"03","awardInfo":"智","num":1,"status":"1"},
//						    	{"awardType":"03","awardInfo":"福","num":2,"status":"0"},
//						    	{"awardType":"03","awardInfo":"慧","num":1,"status":"1"},
//						    	{"awardType":"03","awardInfo":"家","num":2,"status":"0"},
//				    ],wordStatus:true,"success":true}}
//						data ={"ec":"M00000","em":"","requestURI":"","execptionTrace":"","cd":{"wordGift":"苹果手机","wordStatus":true,"Awards":[{"awardType":"01","awardInfo":"38.00","num":1,"status":"1"},{"awardType":"02","awardInfo":"1000.00","num":1,"status":"0"},{"awardType":"04","awardInfo":null,"num":1,"status":"0"},{"awardType":"03","awardInfo":"家","num":1,"status":"1"},{"awardType":"03","awardInfo":"慧","num":1,"status":"1"},{"awardType":"03","awardInfo":"星","num":1,"status":"1"},{"awardType":"03","awardInfo":"智","num":2,"status":"1"},{"awardType":"03","awardInfo":"福","num":1,"status":"1"}],"msg":"OK","success":true}}
//					return;
					if (data.ec === 'M00000') {
						_self.showContent(data.cd)
					}else{
						this.prizeData = prizeData
						$mswindow.alert(data.em);
					}

				});
			}
		})
	</script>
</body>
</html>